<template>
    <div class="login">
        <img class="login-bg" src="../../assets/login-bg.png" alt="">
        <div class="login-view">
            <div class="login-item">

            </div>
            <div class="login-item">
                <a-form :form="form" class="login-form" @submit="handleSubmit">
                    <div class="login-label">
                        业务管理平台
                    </div>
                    <a-form-item>
                        <a-input
                                v-decorator="['loginUserName',{ rules: [{ required: true, message: '请输入用户名' }] }]"
                                placeholder="用户名">
                            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input
                                v-decorator="['loginPassword',{ rules: [{ required: true, message: '请输入密码' }] }]"
                                type="password" placeholder="密码">
                            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <!--<a-checkbox-->
                        <!--v-decorator="['remember',{valuePropName: 'checked',initialValue: true},]">-->
                        <!--记住密码-->
                        <!--</a-checkbox>-->
                        <!--<a class="login-form-forgot" href="">-->
                        <!--忘记密码-->
                        <!--</a>-->
                        <a-button type="primary" html-type="submit" class="login-form-button">
                            登录
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
        <rePassword ref="rePassword" :must-set="true" :token="userInfo.authToken" @passwordGo="passwordGo"></rePassword>
    </div>
</template>

<script>
    import {login, overdueCheck, } from "../../assets/api";
    import {setSession} from "@/assets/service/auth";
    import md5 from 'md5'
    import jwt from 'jsonwebtoken'
    import {getToken, setLocal, setToken} from "../../assets/service/auth";
    import {initUserType} from "../../assets/init_user_type";
    import rePassword from '../rePassword/index.vue'
    export default {
        name: "index",
        data() {
            return {
                formLayout: 'horizontal',
                form: this.$form.createForm(this, {name: 'coordinated'}),
                userInfo:{}
            }
        },
        components:{
            rePassword
        },
        created() {

        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        values.loginPassword = md5(values.loginPassword)
                        login({
                            param: values
                        })
                            .then(result => {
                                this.userInfo = result.result
                                return result
                            })
                            .then(user=>{
                                return overdueCheck({
                                    token:this.userInfo.authToken
                                })
                                    .then(result=>{
                                        if(result.result){
                                            this.$refs.rePassword.visible = true
                                        }else{
                                            console.log(this.userInfo,1111111111)
                                            setToken(this.userInfo.authToken)
                                            // setSession('refreshToken',this.userInfo.refreshToken)
                                            setLocal('userInfo',JSON.stringify(this.userInfo))
                                            this.$store.dispatch('setUserInfo', this.userInfo)
                                                .then(_=>{
                                                    initUserType(this.userInfo)
                                                        .then(_ => {
                                                            this.$router.replace('/')
                                                        })
                                                })
                                        }
                                    })
                            })
                    }
                })
            },
            passwordGo(){
                setLocal('userInfo',JSON.stringify(this.userInfo))
                setToken(this.userInfo.authToken)
                this.$store.dispatch('setUserInfo', this.userInfo)
                    .then(_=>{
                        initUserType(this.userInfo)
                            .then(_ => {
                                this.$router.replace('/')
                            })
                    })
            }
        }
    }
</script>

<style scoped lang="less">
    .login {
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;

        .login-bg {
            width: 100%;
            height: 100%;
            filter: blur(6px);
        }

        .login-view {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .login-item {
            width: 100%;
            font-size: 16px;
            text-align: center;
        }

        .login-label {
            margin: 10px 0;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }

        .login-form {
            width: 350px;
            margin: 0 auto;
            text-align: center;
            background: #fff;
            padding: 20px 30px;
            border-radius: 6px;
        }

        .login-form-forgot {
            float: right;
        }

        .ant-form-item label {
            float: left;
        }

        .login-form-button {
            width: 100%;
        }
    }

    @media screen and (max-width: 575px) {
        .login-item:nth-child(1) {
            display: none;
        }
    }
</style>
